<template>
  <div class="btn-group-toggle" data-toggle="buttons">
    <label
      v-for="(option, index) in options"
      :key="index"
      class="btn"
      :class="[{ active: value === option.value }, buttonClasses]"
    >
      <input
        :value="option.value"
        v-model="model"
        type="radio"
        id="option1"
        autocomplete="off"
        checked=""
      />
      {{ option.label }}
    </label>
  </div>
</template>
<script>
export default {
  name: "button-radio-group",
  props: {
    options: {
      type: Array,
      description:
        'Radio options. Should be an array of objects {value: "", label: ""}',
      default: () => [],
    },
    value: {
      type: String,
      description: "Radio value",
    },
    buttonClasses: {
      type: [String, Object],
      description: "Inner button css classes",
    },
  },
  model: {
    prop: "value",
    event: "change",
  },
  computed: {
    model: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("change", val);
      },
    },
  },
};
</script>
<style>
</style>
